import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { GUI } from 'three/addons/libs/lil-gui.module.min.js'

//创建场景
const scene = new THREE.Scene()

//创建几何体
const geometry = new THREE.BoxGeometry(100, 100, 100)
//创建材质
const material = new THREE.MeshLambertMaterial({
    color: new THREE.Color('orange')
})
//创建模型 传入几何体和材质
const mesh = new THREE.Mesh(geometry, material)
//设置模型位置
mesh.position.set(0, 0, 0)
//添加模型到场景
scene.add(mesh)
//创建GUI
const gui = new GUI()
//创建几何体文件夹
const meshFolder = gui.addFolder('几何体')
//添加几何体属性到文件夹
meshFolder.addColor(mesh.material, 'color')
meshFolder.add(mesh.position, 'x').step(10)
meshFolder.add(mesh.position, 'y').step(10)
meshFolder.add(mesh.position, 'z').step(10)

//创建环境光
const pointLight = new THREE.PointLight(0xffffff, 10000)
//设置环境光位置
pointLight.position.set(80, 80, 80)
//添加环境光到场景
scene.add(pointLight)
//创建环境光文件夹
const pointLightFolder = gui.addFolder('环境光')
//添加环境光属性到文件夹
pointLightFolder.add(pointLight.position, 'x').step(10)
pointLightFolder.add(pointLight.position, 'y').step(10)
pointLightFolder.add(pointLight.position, 'z').step(10)
pointLightFolder.add(pointLight, 'intensity').step(1000)

//创建坐标轴辅助器 传入坐标轴长度
const axesHelper = new THREE.AxesHelper(200)
//添加坐标轴辅助器到场景
scene.add(axesHelper)

const obj = {
    aaa: '哈哈哈',
    bbb: false,
    ccc: 0,
    ddd: '111',
    fff: 'Bbb',
    logic: function() {
        alert('你好')
    }
}
const otherFolder = gui.addFolder('其他')
otherFolder.add(obj, 'aaa').onChange((val) => {
    console.log(val)
})
otherFolder.add(obj, 'bbb')
otherFolder.add(obj, 'ccc').step(0.5).min(0).max(10)
otherFolder.add(obj, 'ddd', ['111', '222', '333'])
otherFolder.add(obj, 'fff', {
   Aaa: 0,
   Bbb: 1,
   Ccc: 2 
})
otherFolder.add(obj, 'logic')

//获取页面宽度高度
const width = window.innerWidth
const height = window.innerHeight
//创建相机 传入相机的角度、宽高比、近平面和远平面
const camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000)
//设置相机位置
camera.position.set(200, 200, 200)
//设置相机方向
camera.lookAt(0, 0, 0)
//创建WebGL渲染器
const renderer = new THREE.WebGLRenderer()
//设置渲染器尺寸
renderer.setSize(width, height)

function render() {
    //渲染场景和相机
    renderer.render(scene, camera)
    //请求浏览器执行渲染函数
    requestAnimationFrame(render)
}
render()

//将渲染器添加到页面
document.body.append(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)